<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/css/main.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <style>
       /*头部*/

        .ksd-headerbox{height: 200px;text-align: center;background:url("http://www.51chongyin.com/images/banner1.jpg") #FAFAFA ;background-repeat:no-repeat; background-size:100% 100%; -moz-background-size:100% 100%; color: aliceblue;overflow: hidden}
        .ksd-headerbox .title{font-size: 24px; }
        .ksd-headerbox .ksd-cheader-box{width: 650px;margin:0 auto;text-align: center;padding-top: 12px;}
     /*上层内容*/
        .ksd-section{margin-top: 10px}
       [v-cloak]{display: none}
    </style>
</head>
<body>

    <div id="app" v-cloak>

<!--头部-->
<header>
    <div class="ksd-headerbox">
        <div class="ksd-cheader-box">
            <h3 class="title pt20 b">{{stateVo.title}}</h3>
            <p class="pt10" v-html="stateVo.description"></p>
            <div class="f10 mt30">
                <span class="mr5">参与人数：{{stateVo.personnum}}</span>
                <span class="ml10">统计时间：{{stateVo.createTime}}</span></div>
                <input type="hidden" id="stateid" th:value="${id}">
        </div>
    </div>
</header>
<style>

</style>
<!--上层内容-->
<section class="ksd-section">

    <div class="layui-container ksd-container">
        <div class="layui-row" style="text-align: center">
            <div class="layui-col-md12 tc">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="main" style="width: 100%;height:400px;"></div>
            </div>
        </div>
    </div>

</section>
<!--底部-->
<footer class="mt20">
    <div class="layui-container ksd-container">
        <div class="layui-row">
            <div class="layui-col-md12 tc">
                <p class="b f20 g6 ">统计还剩余:{{stateVo.endtime}}</p>
            </div>
        </div>
    </div>

</footer>
    </div>
<script src="/js/vue.min.js"></script>
<script src="/layui/layui.js"></script>
<script src="/echarts/echarts.min.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            stateVo: {},
            myChart: null,
            stateDetailList: [], //用来接收统计明细的容器
            stateid: "",
        },
        created:function(){
            this.stateid =$("#stateid").val();
            //查询统计数据信息
          this.loadStateDetail();
        },
        methods:{
            //查询统计数据信息的接口定义
            loadStateDetail:function(){
                var that = this;
                axios.get("/state/detail?stateid="+this.stateid).then(function(res){
                    //this..stateVo = res.data.data.stateVo; 会就近原则指向最近的一个对象
                    //查询数据表的数据 stateVo
                    that.stateVo = res.data.data.stateVo;
                    //获取到对应的明细数据
                    that.stateDetailList = res.data.data.stateVo.stateDetailList;
                    //加载统计报表图
                    that.loadCharts(that.stateDetailList);
                })
            },
            //统计报表的加载
            loadCharts: function(stateDetailList){
                var that = this;
                if(stateDetailList && stateDetailList.length == 0) return;
                var xAxisData = [];
                var yAxisData = [];
                for (var i = 0; i <stateDetailList.length ; i++) {
                    xAxisData.push(stateDetailList[i].title+ "("+ stateDetailList[i].itemnum +")");
                    yAxisData.push(stateDetailList[i].itemnum);
                }

                // 基于准备好的dom，初始化echarts实例
                if(!this.myChart){
                    this.myChart = echarts.init(document.getElementById('main'));
                    //给统计报表向绑定点击事件
                    that.myChart.on('click', function (params) {
                        console.log(params);
                    });
                }


                // 指定图表的配置项和数据
                var option = {
                    xAxis: {
                        type: 'category',
                        data: xAxisData,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: yAxisData,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                that.myChart.setOption(option);

            }



        }
    })


</script>

</body>
</html>
